<div class="row">
  <div style="height:10px"></div>
  <div class="col-sm-10 col-sm-push-1">
    <form class="form content form-horizontal" [formGroup]="fieldConfForm">
      <div class="one-form-header">
        <div class="form-group">
          <label for="field_add_auditDsName" class="col-xs-2 control-label"><span
            style="color: red;">*</span>审核数据名称:</label>
          <div class="col-xs-4">
            <input type="text" class="form-control" id="field_add_auditDsName" formControlName="auditDsName"
                   placeholder="审核数据名称" required>
            <div *ngIf="formErrors.auditDsName" class="has-error">
              <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.auditDsName}} </label>
            </div>
          </div>

          <div class="row">
            <label class="col-xs-2 control-label">保持原结构:</label>
            <div class="col-xs-4 col-sm-push-1 ">
              <div class="row" style="padding-top: 7px;">
                <div class="col-xs-4 ">
                  <input type="radio" id="ds_useType_yes" value="1" formControlName="isKeepOri">
                  <label for="ds_useType_yes">
                    是
                  </label>
                </div>
                <div class="col-xs-4 ">
                  <input type="radio" id="ds_useType_no" formControlName="isKeepOri" checked value="0">
                  <label for="ds_useType_no">
                    否
                  </label>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="form-group">
          <label for="field_add_oriDsId" class="col-xs-2 control-label"><span
            style="color: red;">*</span>原始数据源:</label>
          <div class="col-xs-4">
            <select class="multiselect" id="field_add_oriDsId" class="form-control" formControlName="oriDsId"
                    placeholder="请选择" required><!--这里是将自身作为参数传递，否则拿不到下拉框中选择的值(change)="changeDs( 'ori', $event)"-->
              <option *ngFor="let state of oriDsNames" [value]="state.value">{{state.name}}</option>
            </select>
            <div *ngIf="formErrors.oriDsId" class="has-error">
              <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.oriDsId}} </label>
            </div>
          </div>

          <label class="col-xs-2 control-label"><span
            style="color: red;">*</span>原始表:</label>
          <div class="col-xs-3" style="position: relative;">
            <nz-dropdown
              nzTrigger="click"
              style="width: 100%;">
              <nz-input id="field_add_oriTable" [formControlName]="'oriTable'"
                        nz-dropdown nzSize="large"
                        nzPlaceHolder="输入数据源或下拉选择已有数据源" required>
                <ng-template #suffix>
                  <i class="fa fa-angle-down"></i>
                </ng-template>
              </nz-input>
              <ul nz-menu style="max-height: 400px;overflow: auto;">
                <li nz-menu-item *ngFor="let state of oriTables" (click)="changeOriId(state.name)">
                  {{state.name}}
                </li>
              </ul>
            </nz-dropdown>
            <div style="position: absolute;right: -45px;top: -1px;">
              <button class="btn btn-success" style="display: inline-block " [disabled]="!fieldConfForm.value.oriDsId"
                      (click)=" changeSelect( 'ori')">查询
              </button>
            </div>
            <!--<select class="multiselect" id="field_add_oriTable" class="form-control" formControlName="oriTable"-->
            <!--required>-->
            <!--<option *ngFor="let state of oriTables" [value]="state.name">{{state.name}}</option>-->
            <!--</select>-->
            <div *ngIf="formErrors.oriTable" class="has-error">
              <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.oriTable}} </label>
            </div>
          </div>

        </div>
        <div class="form-group">
          <label for="field_add_auditDsId" class="col-xs-2 control-label"><span
            style="color: red;">*</span>存储数据源:</label>
          <div class="col-xs-4">
            <!--<input type="hidden" class="form-control" id="field_add_auditDsId" formControlName="auditDsId" >-->
            <!--<input type="text" class="form-control" id="field_add_auditDsIdName" formControlName="auditDsIdName" required>-->
            <select class="multiselect" id="field_add_auditDsId" class="form-control"
                    formControlName="auditDsId" placeholder="请选择" required>
              <option *ngFor="let state of auditDsIdNames" [value]="state.value">{{state.name}}</option>
            </select>
            <div *ngIf="formErrors.auditDsId" class="has-error">
              <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.auditDsId}} </label>
            </div>
          </div>

          <label class="col-xs-2 control-label"><span
            style="color: red;">*</span>存储表:</label>
          <div class="col-xs-3" style="position: relative;">
            <nz-dropdown
              nzTrigger="click"
              style="width: 100%;display: inline-block">
              <nz-input id="field_add_auditTable" [formControlName]="'auditTable'"
                        nz-dropdown nzSize="large"
                        nzPlaceHolder="输入数据源或下拉选择已有数据源" required>
                <ng-template #suffix>
                  <i class="fa fa-angle-down"></i>
                </ng-template>
              </nz-input>
              <ul nz-menu style="max-height: 400px;overflow: auto;">
                <li nz-menu-item *ngFor="let state of auditTables" (click)="changeAuditId(state.name)">
                  {{state.name}}
                </li>
              </ul>
            </nz-dropdown>
            <div style="position: absolute;right: -45px;top: -1px;">
              <button class="btn btn-success" style="display: inline-block;" [disabled]="!fieldConfForm.value.auditDsId"
                      (click)="changeSelect( 'audit')">查询
              </button>
            </div>
            <div *ngIf="formErrors.auditTable" class="has-error">
              <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.auditTable}} </label>
            </div>
          </div>
        </div>

        <div class="form-group">
          <div class="row">
            <label class="col-xs-2 control-label">启用:</label>
            <div class="col-sm-4 col-sm-push-1">
              <div class="row" style="padding-top: 7px;">
                <div class="col-xs-4 ">
                  <input type="radio" id="ds_enable_yes" value="1" formControlName="isUse" name="isUse">
                  <label for="ds_enable_yes">
                    启用
                  </label>
                </div>
                <div class="col-xs-4">
                  <input type="radio" id="ds_enable_no" formControlName="isUse" checked value="0" name="isUse">
                  <label for="ds_enable_no">
                    禁用
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="one-form-body">
        <div class="col-md-10" style="margin-bottom: 10px;">

          <button class="btn btn-success" (click)="addFieldNode()">添加字段</button>
          <button class="btn btn-success" (click)="addDefaultFactor()">默认因子</button>
          <button class="btn btn-success" (click)="addAttributeNode()">添加属性</button>
          <button class="btn btn-success" (click)="addMetaAttributeInput()">添加元属性</button>
          <button class="btn btn-success" (click)="addDefaultMetaAttr()">默认元属性</button>
          <button class="btn btn-success" (click)="removeField()">重置</button>
          <button class="btn btn-success" (click)="expandAll()">展开折叠</button>

        </div>
        <div style="height:2px"></div>
        <div name="fieldCondTree">
          <ul id="field_add_fieldConfTree" class="ztree one-custom-ztree"
              style="height: 80%;max-height:500px; width: 100%;  margin:0 auto;">
          </ul>
        </div>
      </div>
      <div class="one-form-footer">
        <div class="pull-right">
          <button class="btn btn-default" type="button" (click)="cancelFieldConfAdd()">取消</button>
          <button class="btn btn-success" type="button" [disabled]="fieldConfForm.invalid" (click)="onSubmit()">提交
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
